<template>
  <div class="count_lis" :style="{ '--coupon_bg': first ? 'rgba(241, 83, 83, 0.5)' : '#d6d6dc', '--coupon_txtC': first ? 'rgba(241, 83, 83, 0.5)' : '#000' }">
    <div class="count_lis_top" :class="[first ? 'count_lis_top_BG' : '']">
      <div class="cir" :class="[first ? 'cir_BG' : '']">
        <div class="cir_top " :class="[first ? 'fis rd' : '']">
          <div class="cir_top_t van-ellipsis" style="width:100%">
            <span class="small" v-if="infoData.coupon.discount_rule_str.is_price == 1">{{ $i18n.t("money") }}</span>
            <span>{{ infoData.coupon.discount_rule_str.discount }}</span>
            <span class="small" v-if="infoData.coupon.discount_rule_str.is_rebate == 1">折</span>
          </div>
          <span class="txt van-ellipsis">{{ infoData.coupon.discount_rule_str.desc }}</span>
        </div>
        <div class="cir_bottom">
          <span class="van-ellipsis" style="width:100%;">{{ infoData.coupon.coupon_name }}</span>
        </div>
      </div>
      <div class="num van-ellipsis" v-if="!first">{{infoData.num}}张</div>
    </div>
    <div class="count_lis_bottom van-ellipsis" @click="to_newCombination" :class="[can_combination ? 'fir' : 'fail']" v-if="first">组合</div>
    <div class="count_lis_bottom van-ellipsis" v-else>当前拥有{{ infoData.has_count }}张</div>
  </div>
</template>
<script>
export default {
  props: {
    first: {
      type: Boolean,
      default: false
    },
    infoData: {
      type: null
    },
    can_combination: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    to_newCombination() {
      this.$emit("newCombination");
    }
  }
};
</script>
<style lang="scss" scoped>
.rd {
  color: #f15353;
}
.count_lis {
  .count_lis_top_BG {
    background: linear-gradient(180deg, rgba(241, 83, 83, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  }
  .count_lis_top {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    height: 6.44rem;
    overflow: hidden;
    position: relative;
    .num {
      position: absolute;
      left: 0;
      top: 0;
      width: 1.88rem;
      height: 1.06rem;
      background: #f15353;
      border-radius: 0.5rem 0rem 0.5rem 0rem;
      font-size: 0.69rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.06rem;
      overflow: hidden;
    }
    .cir {
      width: 5.94rem;
      height: 100%;
      position: relative;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      border: 0.03rem solid #d6d6dc;
      display: flex;
      flex-direction: column;

      padding: 0 0.53rem;
      .cir_top {
        flex: 1;
        border-bottom: 0.03rem dashed #d6d6dc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .txt {
          width: 100%;
        }
        .cir_top_t {
          overflow: hidden;
          font-weight: bold;
          font-size: 1.31rem;
          color: #ec2b2b;

          .small {
            font-size: 0.8rem;
          }
          .price {
            font-weight: 400;
            font-size: 0.75rem;
            color: #00001c;
          }
        }
      }
      .fis {
        border-bottom: 0.03rem dashed #f15353;
      }
      .cir_bottom {
        font-size: 0.75rem;
        color: var(----coupon_txtC);
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .cir_BG {
      border: 0.03rem solid rgba(241, 83, 83, 0.5);
    }
    .cir::before {
      content: "";
      position: absolute;
      width: 0.94rem;
      height: 0.94rem;
      left: -0.6rem;
      bottom: 1.72rem;
      background: #fff;
      border-radius: 50%;
      border: 0.03rem solid var(--coupon_bg);
    }
    .cir::after {
      content: "";
      position: absolute;
      width: 0.94rem;
      height: 0.94rem;
      right: -0.6rem;
      bottom: 1.72rem;
      background: #fff;
      border-radius: 50%;
      border: 0.03rem solid var(--coupon_bg);
    }
  }

  .count_lis_bottom {
    text-align: center;
    font-size: 0.75rem;
    color: #6e6e79;
    height: 1.75rem;
    line-height: 1.75rem;
    margin-top: 0.31rem;
  }
  .fir {
    background: #f15353;
    border-radius: 0.94rem;
    color: #ffffff;
  }
  .fail {
    background: #d6d6dc;
    border-radius: 0.94rem;
    color: #ffffff;
  }
}
</style>
